<!--
 * @Author: wwssaabb
 * @Date: 2021-09-09 10:00:04
 * @LastEditTime: 2021-09-16 17:14:34
 * @FilePath: \gshop-client\src\views\Profile.vue
-->
<template>
  <div class="navbar">
    <NavBar title="我的"></NavBar>
  </div>
  <div class="profile">
    <div class="display-areas">
      <div class="mine">
        <img
          src="https://img0.baidu.com/it/u=289628007,390502527&fm=253&fmt=auto&app=120&f=JPEG?w=514&h=500"
          alt=""
        />
        <div class="info">
          <span @click="goLogin">{{ "登录|注册" }}</span>
          <span
            ><i class="my-icon my-icon-phone"></i>{{ "暂未绑定手机号" }}</span
          >
        </div>
        <div class="btn-info">
          <Icon name="arrow" size="20" color="#fff" />
        </div>
      </div>
    </div>
    <div class="number-areas">
      <div class="item" v-for="item in numbers" :key="item.id">
        <div class="up">
          <span :style="{ color: item.color }">{{ item.value }}</span
          ><span>{{ item.unit }}</span>
        </div>
        <div class="down">
          <span>{{ item.label }}</span>
        </div>
      </div>
    </div>
    <div class="feature-areas">
      <div
        class="feature-item"
        v-for="item in featrue"
        :key="item.id"
        @click="goPage(item.path)"
      >
        <span>
          <Icon
            class-prefix="my-icon"
            :name="item.icon"
            size="25"
            :color="item.color"
          ></Icon>
          <span>{{ item.title }}</span>
        </span>
        <Icon name="arrow" size="20" color="#aaa"></Icon>
      </div>
    </div>
  </div>
  <div class="tabbar">
    <Tabbar :active="3"></Tabbar>
  </div>
</template>

<script setup lang="ts">
import NavBar from "../components/Navbar.vue";
import Tabbar from "../components/Tabbar.vue";
import { Icon } from "vant";
import { useRouter } from "vue-router";
const router = useRouter();

//info展示区
const goLogin = (): void => {
  router.push("/login");
};

//余额、优惠、积分数字展示区
type Numbers = {
  id: number;
  value: string;
  unit: string;
  label: string;
  color: string;
};
const numbers: Numbers[] = [
  {
    id: 1,
    value: "0.00",
    unit: "元",
    label: "我的余额",
    color: "#ff9900",
  },
  {
    id: 2,
    value: "0",
    unit: "个",
    label: "我的优惠",
    color: "#ff5f3e",
  },
  {
    id: 3,
    value: "0",
    unit: "分",
    label: "我的积分",
    color: "#6ac20b",
  },
];

//功能区
type Feature = {
  id: number;
  icon: string;
  title: string;
  path?: string;
  color?: string;
};
const featrue: Feature[] = [
  {
    id: 1,
    icon: "order_1",
    title: "我的订单",
    path: "/order",
    color: "#55c4a2",
  },
  {
    id: 1,
    icon: "integral",
    title: "积分商城",
    color: "#ff5f3e",
  },
  {
    id: 1,
    icon: "vip",
    title: "哇哇外卖会员卡",
    color: "#ff9a02",
  },
  {
    id: 1,
    icon: "city",
    title: "服务中心",
    color: "#02a774",
  },
];
const goPage = (path: string | undefined): void => {
  if (path === undefined) return;
  router.push(path);
};
</script>

<style lang="scss" scoped>
.display-areas {
  position: relative;

  .mine {
    padding: 20px 10px;
    position: relative;
    background-color: #02a774;
    display: flex;
    align-items: center;

    img {
      width: 18vw;
      height: 18vw;
      object-fit: cover;
      border-radius: 50%;
      margin-right: 10px;
    }

    .info {
      color: #fff;
      display: flex;
      flex-direction: column;
      span {
        &:first-child {
          font-size: 16px;
          font-family: "SimHei";
          font-weight: bold;
          margin-bottom: 10px;
        }
        &:last-child {
          font-size: 11px;
          font-family: "SimSun";
          display: flex;
          align-items: center;
          i {
            margin-right: 5px;
          }
        }
      }
    }

    .btn-info {
      position: absolute;
      top: 0;
      right: 5px;
      width: 50px;
      height: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}
.number-areas {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;

  .item {
    width: 33.33%;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &:not(:last-child) {
      border-right: 1px solid #eee;
    }

    .up {
      margin-bottom: 5px;
      span {
        &:first-child {
          font-size: 28px;
          font-family: "Arial";
          font-weight: bold;
          margin: 5px;
        }
        &:last-child {
          font-size: 12px;
          color: #666;
        }
      }
    }

    .down {
      span {
        font-size: 12px;
        color: #666;
      }
    }
  }
}
.feature-areas {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  .feature-item {
    width: 100%;
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 16px;
      color: #333;
      display: flex;
      align-items: center;

      i {
        font-weight: bold;
        margin-right: 5px;
      }
    }
  }
}
</style>
